import React, { Component } from 'react'
import { Link } from "react-router-dom";
import { Layout, Menu } from 'antd';
import MinLeftCss from './index.module.css';

import menuList from '../../../config/routes.js'
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu
export default class MinLeft extends Component {
    createMenu = (menuList) => {
        return menuList.map(menu => {
            if (!menu.children) {
                return (
                    <Menu.Item key={menu.key}>
                        <Link to={menu.path}>{menu.title}</Link>
                    </Menu.Item>
                )
            } else {
                return (
                    <SubMenu key={menu.key} title={menu.title}>
                        {this.createMenu(menu.children)}
                    </SubMenu>
                )
            }
        })
    }
    render() {
        console.log(__dirname + "public/imgs/top.png");
        return (
            <div>
                <Sider trigger={null} collapsible collapsed={this.props.collapsed}>
                    <div className={MinLeftCss.topBox}>
                        <div className={MinLeftCss.topBoxContainer}>
                            <img src="/imgs/top.png" alt="" className={MinLeftCss.topBoxContainerImg} />
                            <div className={MinLeftCss.topBoxIN}>
                                <p>
                                    Bl<span style={{ color: "blue" }}>u</span>e&ensp;|&ensp;蓝 岗
                                    Neighborhood
                                </p>
                            </div>
                        </div>
                    </div>
                    <Menu style={{ height: '91vh' }} theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        {this.createMenu(menuList)}
                    </Menu>
                </Sider>
            </div>
        )
    }
}